<template>
  <div>
    <h1>App</h1>
    {{ title }}
    <hr>
    age:{{ age }}
    <TsCard></TsCard>
    <TsShop></TsShop>
  </div>
</template>
<script setup>
import { provide, inject, ref, readonly } from 'vue';
import { injectUsername } from "./key.js";

import TsCard from './components/TsCard.vue'
import TsShop from './components/TsShop.vue'

const age = ref(20)
const count = ref(10)

const title = inject('title');
// 提供者
provide(injectUsername, 'jack');
provide('age', age);
provide('count', {
  count: readonly(count),
  updateCount: (value) => count.value += value
});


</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>